<template>
  <div class="product-list-container">
    <!-- title 头部内容插槽,这里不做插槽儿了，直接接收一个name title值 -->
    <header class="header" v-if="title">
      <p class="title">{{ title }}</p>
    </header>
    <!-- 列表数据 -->
    <div class="product-list" @click="toDetail">
      <div class="detail" :data-productId="product.id" v-for="product in productList" :key="product.id">
        <!-- 商品图片 -->
        <!-- 加个wrap -->
        <div class="img-wrap">
          <van-image width="100%" height="100%" lazy-load :src="product.primaryPicUrl" />
        </div>
        <!-- 商品名称 -->
        <div class="name">{{ product.name }}</div>
        <!-- 商品价格 -->
        <div class="price">
          <!-- 当前价格 -->
          <span class="cur-priece">￥{{ product.retailPrice }}</span>
          <!-- 原价格 -->
          <span class="origin-price" v-if="product.retailPrice !== product.sortOriginPrice">￥{{ product.sortOriginPrice }}&nbsp;</span>
        </div>
      </div>
    </div>
    <!-- 插槽分隔符 -->
    <slot name="lineBetween"></slot>
  </div>
</template>

<script>
export default {
  name: 'productList',
  props: {
    title: { // 传递进来的 title 名
      default: ''
    },
    productList: { // 商品列表数据
      default: []
    }
  },
  methods:{
    // 跳转详情页
    toDetail(e){
      // 写个递归把
      let productId = -1
      let current = e.target
      // 写个循环把, 最多找六次
      for(let i = 0;i<6;i++){
        if(current.dataset.productid){
          productId = current.dataset.productid
          break
        }else{
          current = current.parentElement
        }
      }
      
      // console.log(e.target.parentElement.parentElement.parentElement.dataset.productid)
      // console
      if(productId === -1) return
      // 跳转路由
      this.$router.push({
        path: '/detail',
        query: { productId }
      })
      
    }
  },
  mounted(){
    // console.log(this.productList)
  }

}
</script>

<style lang="less" scoped>
// 商品列表
.product-list-container{
  color: #333;
  // 头部样式
  .header{
    text-align: center;
    font-size: 18px;
    line-height: 2;
    padding-top: 8px;
  }
  // background: orchid;
  // 商品列表区域
  .product-list{
    // border: 1px solid black;
    // 开弹性盒子
    display: flex;
    // 设置允许换行
    flex-wrap: wrap;
    padding: 5px;
    // 单条儿内容区域
    .detail{
      
      // 设置怪异盒子模型
      box-sizing: border-box;
      padding: 7px;
      // background-color: aquamarine;
      width: 50%;
      // 对应图片
      .img-wrap{
        width: 172px;
        height: 172px;
        background-color: #f4f4f4;
        border-radius: 10px;
        img{
          width: 100%;
          border-radius: 10px;
        }  
      }
      
      // 商品名称
      .name{
        font-size: 15px;
        letter-spacing: 1px;
        line-height: 24px;
      }
      // 价格区域
      .price{
        margin-top: 0px;

        // 当前价格
        .cur-priece{
          font-size: 16px;
          font-weight: bold;
          color: rgb(250, 30, 50);
          vertical-align: middle;
        }
        // 原来价格
        .origin-price{
          font-size: 12px;
          margin-left: 2px;
          color: #aaa;
          text-decoration: line-through;
          vertical-align: middle;
        }
      }
        
    }
  }
}
  
</style>